<template>
  <div>
    <div class="top">
      <h1>
        <img src="./logo (1).png" alt />
      </h1>
      <ul class="topitem">
        <li :class="current!=='MyMusic'?'active':''">
          <router-link to="/">音乐馆</router-link>
        </li>
        <li :class="current === 'MyMusic'?'active':''">
          <router-link to="/mymusic">我的音乐</router-link>
        </li>
        <li>
          <a>客户端</a>
        </li>
        <li>
          <a>开放平台</a>
        </li>
        <li>
          <a>VIP</a>
        </li>
      </ul>
      <div class="search">
        <el-autocomplete :fetch-suggestions="querySearchAsync" placeholder="搜索音乐、MV、歌单、用户"></el-autocomplete>
        <span class="el-icon-search"></span>
      </div>

      <div class="login">
        <a @click="toLogin" v-if="!$store.state.userInfo">登录</a>
        <el-dropdown class="dropdown" v-else @command="handleCommand">
          <div class="avator">
            <img :src="$store.state.userInfo.avatarUrl" alt />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown class="dropdown">
          <el-button type="success">
            开通vip
            <i class="el-icon-caret-bottom"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>开通豪华绿钻</el-dropdown-item>
            <el-dropdown-item>开通付费包</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="dropdown">
          <el-button>
            充值
            <i class="dropdownicon el-icon-caret-bottom"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>购买乐币</el-dropdown-item>
            <el-dropdown-item>充值饭票</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="nav" v-show="current !== 'MyMusic'">
      <ul class="navItem">
        <li>
          <router-link :style="{color:current==='Home'?'#31c27c':''}" :to="{name:'Home'}">首页</router-link>
        </li>
        <li>
          <router-link :style="{color:current==='Ranking'?'#31c27c':''}" :to="{name:'Ranking'}">排行</router-link>
        </li>
        <li>
          <router-link
            :style="{color:current==='SingerList'?'#31c27c':''}"
            :to="{name:'SingerList'}"
          >歌手</router-link>
        </li>
        <li>
          <router-link
            :style="{color:current==='ClassifySong'?'#31c27c':''}"
            :to="{name:'ClassifySong'}"
          >分类歌单</router-link>
        </li>
        <li>
          <a>新碟</a>
        </li>
        <li>
          <a>电台</a>
        </li>
        <li>
          <a>MV</a>
        </li>
        <li>
          <a>数字专辑</a>
        </li>
      </ul>
    </div>
    <Login />
  </div>
</template>

<script>
import Login from "../../components/Login";
export default {
  name: "Header",
  data() {
    return {
      current1: "Home",
    };
  },
  components: {
    Login,
  },
  computed: {
    current() {
      return this.$route.name;
    },
  },

  watch: {
    current(val) {
      this.current1 = val.name;
    },
  },
  methods: {
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号",
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113",
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101",
        },
        { value: "贡茶", address: "上海市长宁区金钟路633号" },
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    toLogin() {
      this.$store.commit("VISIBLE", true);
    },
    // toMyMusic() {
    //   this.$router.history.push({
    //     name: "MyMusic",
    //   });
    // },
    //退出登录
    handleCommand(command) {
      if (command === "logout") {
        //清除localStorage的数据,和清除store中数据
        localStorage.removeItem("userInfo");
        this.$store.commit("UPDATE_USERINFO", "");
      }
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>

<style>
.top {
  border-bottom: 1px solid;
  width: 1200px;
  border-color: #f2f2f2;
  height: 90px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
}
.topitem {
  text-align: center;
  display: flex;
}
.el-input {
  width: 250px !important;
  height: 36px;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
.topitem {
  height: 90px;
}
.topitem li {
  height: 91px;
  width: 80px;
  font-weight: 500;
  padding: 0 10px;
  line-height: 91px;
}
.topitem li a {
  color: black;
  font-size: 18px;
}
.search {
  position: relative;
  display: flex;
  font-size: 25px;
}
.search span {
  font-size: 30px;
}
.el-button el-button--primary el-dropdown-selfdefine {
  width: 80px;
}
.el-icon-search {
  position: absolute;
  top: 17%;
  right: 10px;
}
.active {
  background-color: #31c27c;
}
.el-button {
  width: 122px !important;
}
.el-button--success {
  background-color: #31c27c !important ;
}
.active a {
  color: white !important;
}
.active a:hover {
  color: #fff !important;
}
.dropdown {
  margin: 0 10px;
}
.nav {
  width: 1200px;
  text-align: center;
  margin: 0 auto;
  height: 51px;
  line-height: 51px;
}
.navItem {
  padding-left: 230px;
  display: flex;
}
.navItem li {
  margin: 0 20px;
}
li:hover {
  color: #31c27c;
}
li a:hover {
  color: #31c27c;
}
.top .avator {
  display: inline-block;
  width: 38px;
  height: 38px;
}
.top .avator img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.top .login a {
  flex-shrink: 0;
  margin: 10px 0px 0 10px;
}
.top .login {
  display: flex;
}
</style>
